import {SProgress,SButton} from "../../index.slint";
import {Themes} from "../../use/index.slint";

component TestProgress inherits Window {
  height: 680px;
  width: 400px;

  VerticalLayout {
    spacing: 20px;
    padding: 10px;
    SProgress {
      theme: Error;
      height: 160px;
      bar-type: Circle;
      progress: 56%;
      font-size: 32px;
      font-weight: 700;
      stroke-color: @linear-gradient(180deg, #ff1515 0%,  #41ff57 100%);
      text: @tr("🚀{}%",round(self.progress * 100));
      font-color: @linear-gradient(180deg, #ff1515 0%,  #4193ff 100%);
    }
    SProgress {
      height: 100px;
      bar-type: Horizontal;
      progress: 89%;
      font-size: 16px;
      font-weight: 700;
      stroke-color: @linear-gradient(90deg, #ff1515 0%,  #4741ff 100%);
    }
    b:= SProgress {
      theme: Primary;
      bar-type: Horizontal;
      progress: 10%;
    }
    a:= SProgress {
      height: 120px;
      bar-type: Circle;
      progress: 10%;
    }
    HorizontalLayout {
      padding: 16px;
      alignment: space-around;
      SButton{
        text: "add";
        clicked => {
          a.add(0.1);
          b.add(0.1);
        }
      }
      SButton{
        text: "full";
        clicked => {
          a.full();
          b.full();
        }
      }
      SButton{
        text: "clear";
        clicked => {
          a.clear();
          b.clear();
        }
      }
    }
  }
  
}